<html>
  <head>
    <meta charset="utf8">
    <!-- 引入的css去掉 -->
    <!-- <link type="text/css" rel="styleSheet"  href="./index.css" /> -->
    <!-- 导入element-ui样式 -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
  </head>
  <body>
    <!--挂载点-->
    <div id='vue-app'></div>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="//unpkg.com/element-plus"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 导入组件库 -->
    <script src="//unpkg.com/element-plus"></script>

    <script>
      let options = {
        // 模板
        template: `
          <el-button  size='default' type='primary' @click='insert()'>新增</el-button>
          <el-button size='default' type='success' @click='loadData(true)'>刷新</el-button>
          <table>
            <thead>
              <tr>
                <th>id</th>
                <th>姓名</th>
                <th>电话</th>
                <th>性别</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for='item in list'>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.phone}}</td>
                <td>{{item.gender=='male'?'男孩':'女孩'}}</td>
                <td>
                  <el-button
                   size='small'
                   text=true
                   bg=true
                   round=true
                   @click='info(item.id)'>查看
                  </el-button>
                  <el-button 
                   size='small'
                   circle=true 
                   @click='edit(item.id)'>编辑</el-button>
                  <el-button size='small' type='danger' @click='del(item.id)'>删除</el-button>
                </td>
              </tr>
            </tbody>
          </table>
          <el-link href='https://element-plus.gitee.io/' target='_blank' type='primary'>primary</el-link>
          <el-link href='https://element-plus.gitee.io/' target='_self' disabled>default</el-link>
          <el-link href='https://element-plus.gitee.io/' target='_self' type='success'>success</el-link>
          <el-link href='https://element-plus.gitee.io/' target='_blank' type='warning' :underline='false'>warning</el-link>
        `,
        // data数据中心
        data() {
          return {
            dialogFormVisible: false,
            list: [],
            user: initUser()
          }
        },
        //函数中心
        methods: {
          insert() {
            // 重置表单
            this.user = initUser()
            this.dialogFormVisible = true
          },
          // 数据加载
          loadData(noty) {
            axios.get('/user').then((res) => {
              this.list = res.data.data
              if(noty)
                alert('数据已刷新')
            })
          },
          //编辑
          edit(item) {
            this.user = item
            this.dialogFormVisible = true
          },
          // 查看
          info(id) {
            location.href = './user.vue.html?id=' + id
          },
          // 删除
          del(id) {
            axios.delete('/user?id=' + id).then((res) => {
              res = res.data
              console.log(res)
              if(res.code == 0) {
                alert('已删除')
                this.loadData(false)
              }else
                alert('操作失败')
            })
          },
          //提交
          sumbit(){
            let method = (this.user.id == undefined)?'post':'put' 
            axios[method]('/user', this.user).then((res)=>{
              res = res.data
              if(res.code == 0) {
                alert('操作成功')
                this.loadData()
                this.dialogFormVisible = false
              } else
                alert('添加失败')
            })
          }
        },
        // mounted被挂载后执行
        mounted() {
          this.loadData(false)
        }
      }
      let ppz = Vue.createApp(options)
      ppz.use(ElementPlus)
      ppz.mount('#vue-app')

      function initUser() {
        return {
          name: '',
          phone: '',
          gender: ''
        }
      }
    </script>
  </body>
</html>